// --------------------- 插入占位
$version: '0.0.1';
/* 版本号：#{$version} */

$a: 1;
.test-#{$a} {
    width: 100px;
}

// --------------------- @if、@else if、@else
$is-ok: false;
$theme: "dark";
div {
    // @if $is-ok {
    @if 10<4 {
        width: 100px;
    } @else if $theme == dark {
        background-color: black;
    } @else {
        background-color: white;
        height: 200px;
    }
}

// --------------------- @each
/*
@each $var in $list {}
*/
$icons: susscss error warning;
@each $type in $icons {
    .icon-#{$type} {
        background-image: url(./images/icons/#{$type}.png);
    }
}

// --------------------- @for
/*
@for $var from 开始 through 结束 {}
@for $var from 开始 to 结束 {}

through：<= 结束条件
to：< 结束条件
*/
$num: 4;
@for $i from 1 to $num {
    .col-#{$i} {
        width: 100% / $num * $i;
    }
}

// --------------------- @while
/*
@while 条件 {}
*/
$n: 10;
@while $n>0 {
    .item-#{$n} {
        width: 5px * $n;
    }
    $n: $n - 2;
}

// --------------------- @function、@return、@warn、@error
/*
@function 名称 (参1, 参2, ...) { @return 返回值; }
*/
$colors: (light: #fff, dark: #000);
@function my-color($key) {
    @if not map-has-key($map: $colors, $key: $key) {
        // @warn '在 $colors 中没有找到 #{$key} 这个 key'
        @error '在 $colors 中没有找到 #{$key} 这个 key'
    }
    @return map-get($colors, $key);
}
body {
    // background: my-color(dark);
    background: my-color(dark222);
}

// ---------------------